<template>
	<view class="priceWrap hasFlex">
		<view class="listItem">
			<view class="itemTop xx">
				<view class="priceTit">半年费用</view>
				<view class="price margBot">¥899.0</view>
				<view class="priceTit">全年费用</view>
				<view class="price">¥1599.0</view>
			</view>
			<view class="itemBot">
				<view class="xd">小学</view>
				<view>一年级至六年级</view>
			</view>
		</view>
		<view class="listItem">
			<view class="itemTop cz">
				<view class="priceTit">半年费用</view>
				<view class="price margBot">¥1399.0</view>
				<view class="priceTit">全年费用</view>
				<view class="price">¥2599.0</view>
			</view>
			<view class="itemBot">
				<view class="xd">初中</view>
				<view>七年级至九年级</view>
			</view>
		</view>
		<view class="listItem">
			<view class="itemTop gz">
				<view class="priceTit">半年费用</view>
				<view class="price margBot">¥1799.0</view>
				<view class="priceTit">全年费用</view>
				<view class="price">¥3399.0</view>
			</view>
			<view class="itemBot">
				<view class="xd">高中</view>
				<view>高一至高三</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style lang="scss" scoped>
	.priceWrap{
		justify-content: space-between;
	}
	.listItem{
		width: 32%;
		border-radius: 15rpx;
		background: #fff;
		.itemBot{
			text-align: center;
			padding:10rpx 0;
			color: $pss-text-color8;
			@include respTo(phone){
				font-size: $font-size28;
			}
			@include respTo(pad){
				font-size: $padSize14;
			}
			.xd{
				color: $pss-text-color3;
				margin-bottom: 5rpx;
				@include respTo(phone){
					font-size: $font-size30;
				}
				@include respTo(pad){
					font-size: $padSize18;
				}
			}
		}
		
		.itemTop{
			color: #fff;
			border-radius: 15rpx 15rpx 0 0;
			text-align: center;
			padding: 20rpx 0;
			.priceTit{
				@include respTo(phone){
					font-size: $font-size26;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
				opacity: .8;
			}
			.price{
				@include respTo(phone){
					font-size: $font-size34;
				}
				@include respTo(pad){
					font-size: $padSize22;
				}
				font-weight: bold;
				&.margBot{
					margin-bottom: 10rpx;
				}
			}
			&.xx{
				background: $pss-color-blue;
			}
			&.cz{
				background: #c4db35;
			}
			&.gz{
				background: #fdc818;
			}
		}
	}
</style>